import React, { Component } from 'react'
// 1.引入头部组件
import Header from '../../components/Header/Header'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { reqlogin } from '../../http/api'

export default class Login extends Component {
  constructor() {
    // 2.初始化数据
    super()
    this.state = {
      user: {
        phone: "",
        password: ""
      }
    }
  }
  // 3.封装获取表单的数据的函数
  getUserInfo(value, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: value
      }
    })
  }
  // 登录请求
  async login() {
    let res = await reqlogin(this.state.user);
    if (res.data.code === 200) {
      Toast.show({
        icon: 'success',
        content:res.data.msg
      })
      // 存入信息
      localStorage.setItem('isLogin',JSON.stringify(res.data.list))
      // 跳转页面
      this.props.history.push("/index/home");
     }
  }

  render() {
    let { user } = this.state
    return (
      <div>
        <Header back register title="登录"></Header>
        {/* <div>user:{JSON.stringify(user)}</div> */}
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号'
              clearable
              onChange={(value) => { this.getUserInfo(value, "phone") }}
            />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable
              type='password'
              onChange={(value) => { this.getUserInfo(value, "password") }}
            />
          </Form.Item>
          <Button block color='danger' size='large'
          onClick={()=>{this.login()}}
          >登录</Button>
        </Form>

      </div>
    )
  }
}
